<template>
	<view class="layout">
			<view class="navbar">
				<view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
					
				<view class="titleBar" :style="{height:getTitleBarHeight()+'px',marginLeft:getLeftIconLeft()+'px'}">
					 <view class="goBack" @click="goRouter()">
							<wd-icon name="thin-arrow-left" size="12px"></wd-icon>
					 </view>
					 <text class="title">{{title}}</text>
				</view>
				
			</view>
			
			<view class="fill" :style="{height:getNavBarHeight()+'px'}"></view>
			
			<up-subsection :list="navlist" :current="active"  @change="sectionChangeNav"></up-subsection>
			
			
			

			
			<!-- 	<div class="search-area" v-if="isSearchVisible">
					<view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
					<wd-cell-group border>
						 <wd-input type="text" label-width='60px'  label="盘点单号" v-model="userInfo.lrBill"  placeholder="请输入盘点单号" />
						 <wd-input type="text"  label-width='60px' label="备注" 		 v-model="userInfo.comm"  placeholder="请输入备注" />
						 <up-subsection  :list="list" :current="current" @change="sectionChange"   activeColor="#f56c6c"  ></up-subsection>
						 :formatter="formatter"
						 <wd-datetime-picker 
							 label="日期选择" 
							 label-width="60px" 
							 type="date"
							 :display-format-tab-label="displayFormatTabLabel"
							 
							 title="请选择区间"
							 v-model="userInfo.date"
							 @confirm="handleConfirm14" />
					</wd-cell-group>
					<view class="search-submit">
						<wd-button block @click="searchBill()">搜 索</wd-button>
					</view>
			</div> -->
		
			
			

			

			
	</view>
	
	
</template>

<script setup>
import { ref,reactive} from 'vue';
import {getStatusBarHeight,getTitleBarHeight,getNavBarHeight,getLeftIconLeft} from "@/utils/system.js"
import { getTimestamps} from "@/utils/common.js"  //引入时间格式化插件
import { timeFormat   } from '@/uni_modules/uview-plus';
const emit = defineEmits(["receiveData","activeIndex"])

console.log("时间格式化")
const timestamps = getTimestamps();

// 返回上一页
const goRouter = ()=>{
	uni.reLaunch({
		url:"/pages/index/index"
	})
}

// 控制搜索弹窗是否弹出
const isSearchShow = ref(false);
const isSearchVisible = ref(false);
const userInfo = reactive({
	lrBill:'',
	comm:'',
	// date:[timestamps.oneMonthAgo,timestamps.now]  ,//在这给默认值选择器默认选中状态
	date:[1572531200000,timestamps.now]  ,//在这写死一个23年一月一号的时间戳可以查到数
	beginTime:'',
	endTime:'',
});
const list		= ref(['本日', '近一周', '近两周', '近一月'])
const current = ref(0)

const navlist = ref(['全部','已审核','未审核']);  
const active = ref(0);

function sectionChangeNav(index) {  
  active.value = index;
	emit('activeIndex',active.value);
}  




// 展示格式
const displayFormatTabLabel = (items) => {
	 // ${items[3].label}:${items[4].label}
  return `${items[0].label}年${items[1].label}月${items[2].label}日`
}




// 定义方法，注意在 setup 中不需要 this，直接访问响应式引用 
// 点击选项卡赋值时间
function sectionChange(index) {  
  current.value = index;  
	if(current.value == 0){
		userInfo.date = [timestamps.now,timestamps.now]
	}else if(current.value == 1){
		userInfo.date = [timestamps.threeDaysAgo,timestamps.now]
	}else if(current.value == 2){
		userInfo.date = [timestamps.twoWeeksAgo,timestamps.now]
	}else if(current.value == 3){
		userInfo.date = [timestamps.oneMonthAgo,timestamps.now]
	}
}  

// 时间组件点击确认
const handleConfirm14 =(value)=>{
  console.log(value)
}
// 格式化时间组件
const formatter = (type, value) =>{
	  // switch (type) {
	  //   case 'year':
	  //     return value + '年'
	  //   case 'month':
	  //     return value + '月'
	  //   case 'date':
	  //     return value + '日'
	  //   case 'hour':
	  //     return value + '时'
	  //   case 'minute':
	  //     return value + '分'
	  //   default:
	  //     return value
	  // }
}

// 点击了搜索按钮
const searchBill = ()=>{
	userInfo.beginTime = timeFormat(userInfo.date[0], 'yyyy-mm-dd')
	userInfo.endTime 	= timeFormat(userInfo.date[1], 'yyyy-mm-dd');
	console.log(userInfo)
	 // 使用 $emit 发送数据到父组件
	 emit('receiveData',userInfo);
	 isSearchVisible.value = !isSearchVisible.value;
}






defineProps({
	title:{
		type:String,
		default:"壁纸"
	}
})


const goBack = () => {
	uni.reLaunch({
		url:"/pages/index/index"
	})
};

const searchBtn = () =>{
  isSearchVisible.value = !isSearchVisible.value;
	console.log("您点击的搜索按钮")
}


</script>

<style lang="scss" scoped>
.layout{
	.navbar{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		z-index: 10;
		// height: 44px;
		background: linear-gradient( 135deg, #435EF5 0%, #68B1F9 100%);
		box-shadow: 0px 1px 2px 0px rgba(58,133,255,0.8);
		// background:
		// linear-gradient(to bottom,transparent,#fff 400px),
		// radial-gradient(90% 300px at left top, #C8DEFF, transparent),
		// radial-gradient(60% 300px at right top, #76ACFF, transparent);
		.statusBar{}
		.titleBar{
			display: flex;	
			align-items: center;
			padding:0 30rpx;
			justify-content: center;
			position: relative;
			.goBack{
				position: absolute;
				left: 20rpx;
				width: 70rpx;
				height:50rpx;
				// border: 1px solid #f40;
				display: flex;
				justify-content: center;
				align-items: center;
				// color: $text-font-color-1;
				color: #fff;
			}
			.title{
				font-size: 30rpx;
				font-weight: 700;
				// color: $text-font-color-1;
				color: #fff;
			}
		}
	}
}


.wx-header{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size:25rpx;
	font-weight: bold;
	background:
	linear-gradient(to bottom,transparent,#fff 400px),
	radial-gradient(90% 300px at left top, #C8DEFF, transparent),
	radial-gradient(60% 300px at right top, #76ACFF, transparent) !important;
}

.search-container{
	width: 100vw;
	height:50vh;
	box-sizing: border-box;
	// min-height: 300rpx;
	
	.search-header{
		width: 100%;
		height:70rpx;
		// background-color: #4e6ef2;
		background:
		linear-gradient(to bottom,transparent,#fff 400px),
		radial-gradient(90% 300px at left top, #4e6ef2, transparent),
		radial-gradient(60% 300px at right top, #4e6ef2, transparent) !important;
		color: #fff;
		font-size:24rpx;
		// border-radius: 10px 10px 0px 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}
	.search-con{
		width: 100%;
		min-height: 400rpx;
		// padding:10rpx;
		// overflow-y: auto;
	}
}


.search-area {
  position: fixed; /* 绝对定位以展开在导航栏下 */
  top:44px; /* 刚好在导航栏下面 */
  left: 0;
  right: 0;
	width: 100%;
	// height:200rpx;
	background-color: #fff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 10;
	.search-submit{
		background-color: #fff;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		width: 100%;
		box-sizing: border-box;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}


</style>